<template>
	<view class="peoject-warp">
		<view class="search-item">
			<!-- <Topsearch :showCate='false' :searchKeyWord="searchKeyWord" :currentCateIndex="cateIndex" @currentCateClick='changeCateIndex'
			 @searchEvent="searchDetail1" @searchClear='searchDetail1' /> -->
			<Topsearch :showCate='false' :showFocus="showFocus" :searchKeyWord="searchKeyWord" :currentCateIndex="cateIndex"
			 @currentCateClick='changeCateIndex' @searchEvent="searchDetail" @searchClear='searchDetail' />

			<view class="re-filter-contain">
				<view class="re-filter-contain-left">
					<LiFilter @change="change" @select="select" ref="refLiFilter" :datalist="datalist" :height="height" :mineChecked="mineChecked" />
				</view>
				<view @click="resetList()" class="search-cate-text last-item">
					<!-- <text class="icon iconfont iconchongzhi"></text> -->
					<image src="https://www.innovationgloble.com/wxs/img/wx/kcxcx/clear.png" mode="widthFix"></image>
					重置
				</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<view :class="isPlace?'goods-list':'goods-list m40'">
			<view class="expert-list">
				<ExpertItem ref='ExpertItem' :expertList="projectData"></ExpertItem>
			</view>
			<view v-if="parseFloat(total)===0">
				<view class="sysNodata">
					<image src="../../static/nomorepro.png" mode=""></image>
					<view class="sysNodataTitle">
						暂无相关数据
					</view>
				</view>
			</view>
			<view v-if="parseFloat(total)===0">
				<view class="recomm-contain">
					<view class="sysForYou">
						<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/pro_for_you.png"></image>
					</view>
					<view class="recommend-search-contain">
						<ExpertItem ref='ProjectItem' :expertList="searchRecommendExpertList"></ExpertItem>
					</view>
				</view>
				<view class="sysBottomShow">
					已加载今日全部推荐
				</view>
			</view>

			<view class="sysBottomShow" v-if="isLastPage&&parseFloat(total)!=0&&projectData.length>2">
				我是有底线的
			</view>
		</view>
		<view class="totop" @click="top" :style="{'display':(flag===true? 'block':'none')}">
			<uni-icons type="arrowthinup" size="24" color="#444444" style="font-weight: bold;"></uni-icons>
		</view>
	</view>
</template>

<script>
	import LiFilter from '@/components/Li-Filter/Li-Filter.vue';
	import ExpertItem from '@/components/page-componnet/expert-item.vue';
	import Topsearch from '@/components/top-search-tab.vue'
	import searchCondition from '@/utils/search_condition.js';
	export default {
		components: {
			LiFilter,
			ExpertItem,
			Topsearch
		},
		data() {
			return {
				height: 0.6,
				flag: false,
				searchKeyWord: '',
				showFocus: false,
				searchValue: '',
				cateIndex: 1,
				isPlace: false,
				mineChecked: false,
				searchRecommendExpertList: [],
				datalist: {
					filterType: 1,
					data: [{
							title: '综合', //排序头的名称
							value: 'a',
							type: 1, //类型，0：没有下拉选项，1：单项下拉列表，2：多项列表，如地区选择
							data: []
						},
						{
							title: '全国', //排序头的名称
							value: 'b',
							type: 2, //类型，0：没有下拉选项，1：单项下拉列表，2：多项列表，如地区选择
							data: []
						},
						{
							title: '研究领域', //排序头的名称
							value: 'c',
							type: 2, //类型，0：没有下拉选项，1：单项下拉列表，2：多项列表，如地区选择
							data: []
						},
					]
				},
				params: {
					pageSize: 15,
					pageNumber: 1,
					keyWord: '',
					sort: '',
					province: '',
					city: '',
					researchArea: ''
				},
				indexArr: '',
				valueArr: '',
				loadingText: "正在加载...",
				filterDropdownValue: null,
				filterData: [],
				projectData: [],
				total: 1,
				recTotal: 1,
				recProjectData: [],
				isShowDeleate: false,
				isLastPage: false
			};
		},
		filters: {
			outData(value) {
				return JSON.stringify(value);
			}
		},
		onLoad: function(option) {
			this.getExpertList();
			this.getProjectType();
			searchCondition.loadExpert();
		},
		watch: {
			//监听输入框值
			searchValue(val) {
				val === '' ? this.isShowDeleate = false : this.isShowDeleate = true
			},
			//监听没有数值
			total(val) {
				if (parseFloat(val) === 0) {
					this.recProjectData = [];
					this.getAllProjectList()
				}
			}
		},
		methods: {
			getexpertRecommendList() {
				this.$request.post({
					url: 'ExpertInfo/selectExperInfoByCondition',
					data: {
						pageSize: 5,
						pageNumber: 1,
					},
				}).then(res => {
					for (let k of res.list) {
						k.research = k.research.split(',')

						let priceItems = k.mallInfo;
						if (priceItems && priceItems.length !== 0) {
							//获取到 图文咨询
							const picTxtItems = priceItems.filter(item => parseInt(item.typeId) === 2);
							if (picTxtItems.length !== 0) {
								if (parseFloat(picTxtItems[0].isEnable) === 1) {
									k.picTxtItem = picTxtItems[0];
								}
							}
							const phoneItems = priceItems.filter(item => parseInt(item.typeId) === 3);
							if (phoneItems.length !== 0) {
								if (parseFloat(phoneItems[0].isEnable) === 1) {
									k.phoneItem = phoneItems[0];
								}
							}
						}
					}
					let array = res.list;
					this.searchRecommendExpertList = array.length > 5 ? array.slice(0, 5) : array;
				});
			},
			changeCateIndex(data) {
				this.cateIndex = data;
			},
			searchDetail(data) {
				this.params.keyWord = data.keyWord;
				this.params.pageNumber = 1;
				this.projectData = [];
				const params = searchCondition.composeCondition(data.keyWord, 'expert');
				const formData = Object.assign(params, {
					pageNumber: 1,
					pageSize: 15
				});
				this.params = formData;
				console.log('this.params formData##', this.params);
				this.getExpertList();
			},
			//获取融资类型检索条件
			getNowFina() {
				this.$request.get({
					url: 'dict/getTreeByType?type=financial_type',
					data: {
						type: 'financial_type'
					},
				}).then(res => {
					let obj = {
						value: '全部',
						code: ''
					}
					this.financialType = res.children;
					this.financialType.unshift(obj);
					uni.stopPullDownRefresh();
				})
			},
			//获取当前阶段检索条件
			getNowProcess() {
				this.$request.get({
					url: 'dict/getTreeByType?type=process_type',
					data: {
						type: 'process_type'
					},
				}).then(res => {
					let obj = {
						value: '全部',
						code: ''
					}
					this.processType = res.children;
					this.processType.unshift(obj)
				})
			},
			//获取所有的省份
			getAllProvince() {
				this.$request.get({
					url: 'region/queryAllProvinces.json',
					data: {},
				}).then(res => {
					for (let i = 0; i < res.length; i++) {
						res[i].value = res[i].regionId;
						res[i].text = res[i].name;
						res[i].optionType = 1;
					}
					let list0 = {
						text: '全国',
						value: '全国'
					};
					res.unshift(list0);
					let AreaItem = {
						title: '全国', //排序头的名称
						value: 'c',
						type: 2, //类型，0：没有下拉选项，1：单项下拉列表，2：多项列表，如地区选择
						data: res
					};
					this.$nextTick(function() {
						this.datalist.data.splice(1, 1, AreaItem);
					});
				})
			},
			//根据省份获取所在市
			getCity(provinceId, index) {
				this.$request.get({
					url: 'region/queryCityByProvinceId.json',
					data: {
						provinceId
					},
				}).then(res => {
					for (let i = 0; i < res.length; i++) {
						res[i].value = res[i].regionId;
						res[i].text = res[i].name;
					}
					this.$nextTick(function() {
						this.$set(this.datalist.data[1].data[index], 'children', res)
					});
				})
			},
			// 获取项目筛选条件
			getProjectType() {
				this.$request.get({
					url: 'manager/Research/selectAllResearch'
				}).then(res => {
					console.log('ProjectType', res)
					let projectTypeList = res;
					let list0 = {
						text: '全部',
						value: '全部'
					};
					for (let i = 0; i < projectTypeList.length; i++) {
						projectTypeList[i].text = projectTypeList[i].researchName;
						projectTypeList[i].value = projectTypeList[i].code;
					}
					projectTypeList.unshift(list0);

					let tempdata = {
						filterType: 1,
						data: []
					};
					let normalItem = {
						title: '综合', //排序头的名称
						value: 'a',
						type: 1, //类型，0：没有下拉选项，1：单项下拉列表，2：多项列表，如地区选择
						data: [{
								value: 1,
								text: '综合'
							},
							{
								value: 2,
								text: '最新'
							}
						]
					};
					let projectItem = {
						title: '研究领域', //排序头的名称
						value: 'b',
						type: 1, //类型，0：没有下拉选项，1：单项下拉列表，2：多项列表，如地区选择
						data: projectTypeList
					};
					let AreaItem = {
						title: '全国', //排序头的名称
						value: 'c',
						type: 2, //类型，0：没有下拉选项，1：单项下拉列表，2：多项列表，如地区选择
						data: []
					};
					tempdata.data[0] = normalItem;
					tempdata.data[1] = AreaItem;
					tempdata.data[2] = projectItem;
					// this.datalist = tempdata;
					this.datalist.data[0] = normalItem;

					this.datalist.data[2] = projectItem
					this.getAllProvince();
				});
			},
			select(e) {
				let nodes = e.nodes;
				if (e.root.value === 'b') {
					console.log(nodes)
					this.params.researchArea = nodes.code
				}
				if (e.root.value === 'c') {
					if (nodes.length > 0 && nodes[0].text === "全国") {
						this.params.province = '';
						this.params.city = '';
					} else {
						this.params.province = e.nodes[0].value;
						this.params.city = e.nodes[1].value;
					}

				}
				if (e.root.value === 'a') {
					if (e.data.text == '综合') {
						this.params.sort = ''
					}
					if (e.data.text == '最新') {
						this.params.sort = "desc";
					}
				}
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.params.pageNumber = 1;
				this.projectData = [];
				this.getExpertList();
				this.mineChecked = true;
			},
			change(e) {

			},
			toVerify() {
				uni.navigateTo({
					url: '/pagesB/expert-verify/expert-verify'
				})
			},
			//項目詳情
			toDetails(item) {
				console.log(item)
				uni.navigateTo({
					url: "../expert-details/expert-details?id=" + item.expertId
				})
			},
			top() { //回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
				if (e.scrollTop > 600) { //当距离大于600时显示回到顶部按钮
					this.flag = true
				} else { //当距离小于600时显示回到顶部按钮
					this.flag = false
				}
			},
			search() {
				this.params.keyWord = this.searchValue;
				this.params.pageNumber = 1;
				this.projectData = [];
				this.getExpertList();
			},
			//清空输入框
			handleClearValue() {
				this.searchValue = ''
			},
			//获取融资阶段
			onLoadType() {
				let params = {
					type: 'financial_type'
				};
				this.$request.get({
					url: 'dict/getTreeByType',
					data: params
				}).then(res => {
					console.log('融资阶段', res)
					let financialType = res.children;
					let arr = [];
					res.children.forEach((item, key) => {
						console.log(item)
						arr.push({
							name: item.value,
							value: item.code
						})
					})
					this.filterData[3].submenu[0].submenu = arr;
					console.log(this.filterData)
				})
			},
			//获取技术领域
			onLoadArea() {
				let params = {
					type: 'skill_area'
				};
				this.$request.get({
					url: 'dict/getTreeByType',
					data: params
				}).then(res => {
					console.log('技术领域', res)
					let financialType = res.children;
					let arr = [];
					res.children.forEach((item, key) => {
						console.log(item)
						arr.push({
							"name": item.value,
							"value": item.code,
							"submenu": []
						})
					})
					this.filterData[2].submenu = arr;
					console.log(this.filterData)
				})
			},
			//接收菜单结果
			confirm(e) {
				this.indexArr = e.index;
				this.valueArr = e.value;
			},
			//获取商品全部列表
			getAllProjectList() {
				let params = this.params;
				params.keyWord = '';
				this.$request.post({
					url: 'projectInfo/pageQueryList.json',
					data: params
				}).then(res => {
					this.recTotal = res.count;
					this.recProjectData = this.recProjectData.concat(res.data);
					console.log('projectData----', this.projectData)
				})
			},
			resetList() {
				this.params = {
					pageNumber: 1,
					pageSize: 15
				};
				this.projectData = [];
				this.mineChecked = false;
				this.getExpertList();

				this.$refs.refLiFilter.setTitle();
			},
			//加载专家列表
			getExpertList() {
				uni.showLoading({
					title: '加载中'
				});
				let params = this.params;
				this.$request.post({
					url: 'ExpertInfo/selectExperInfoByCondition',
					data: params
				}).then(res => {
					uni.hideLoading()
					this.total = res.total;
					for (let k of res.list) {
						k.research = k.research.split(',')

						let priceItems = k.mallInfo;
						if (priceItems && priceItems.length !== 0) {
							//获取到 图文咨询
							const picTxtItems = priceItems.filter(item => parseInt(item.typeId) === 2);
							if (picTxtItems.length !== 0) {
								if (parseFloat(picTxtItems[0].isEnable) === 1) {
									k.picTxtItem = picTxtItems[0];
								}
							}
							const phoneItems = priceItems.filter(item => parseInt(item.typeId) === 3);
							if (phoneItems.length !== 0) {
								if (parseFloat(phoneItems[0].isEnable) === 1) {
									k.phoneItem = phoneItems[0];
								}
							}
						}
					}
					this.projectData = [...this.projectData, ...res.list];
					this.isLastPage = res.isLastPage
					uni.stopPullDownRefresh();
					if (this.projectData.length === 0) {
						this.getexpertRecommendList()
					}

				})

			},
			toGoods(item) {
				console.log('toGoods', item)
				uni.navigateTo({
					url: '../project-details/project-details?id=' + item.projectId
				})
			}
		},
		onHide() {
			this.$refs.ExpertItem.resetOpcity()

		},
		onPullDownRefresh() {
			this.params.pageNumber = 1;
			this.isLastPage = false;
			this.projectData = [];
			this.getExpertList();
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			if (!this.isLastPage) {
				this.params.pageNumber += 1
				this.getExpertList();
			}
		},
	}
</script>
<style scoped lang="scss">
	.recomm-contain {
		background-color: #FFFFFF;
	}

	.search-cate-text {
		display: flex;
		align-items: center;
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #A3A3A3;
		padding-right: 30upx;
		/* margin-right: 46upx; */
		/* position: absolute;
		top: 12upx;
		right: 30upx;
		z-index: 4 */
	}

	.search-cate-text image {
		width: 24upx;
		height: 24upx;
		margin-right: 10upx;
	}

	.last-item {
		margin-right: 0upx;
	}

	.expert-item {
		box-sizing: border-box;
		background-color: #FFFFFF;
		margin-bottom: 16upx;

		.expert-top {
			display: flex;
			padding: 38upx 38upx 0 38upx;
			justify-content: space-between;

			.s1 {
				margin-right: 26upx;

				image {
					width: 90upx;
					height: 90upx;
					border-radius: 50%;
				}
			}

			.s2 {
				flex: 1;

				.session-1 {
					display: flex;

					span {
						font-size: 34upx;
						line-height: 34upx;
						font-weight: bold;
						color: rgba(68, 68, 68, 1);
						margin-bottom: 18upx;
						margin-top: 6upx;
						display: inline-block;
						margin-right: 20upx;
					}

					.ses-verify {
						width: 94upx;
						height: 36upx;
						background: rgba(215, 253, 245, 1);
						border-radius: 4upx;
						font-size: 22upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(18, 163, 131, 1);
						margin-right: 12upx;
						padding-left: 12upx;
						margin-top: 8upx;

						image {
							width: 20upx;
							height: 24upx;
							margin-right: 6upx;
							display: inline-block;
							vertical-align: middle;
							margin-bottom: 4upx;
						}
					}

					.ses-invi {
						width: 94upx;
						height: 36upx;
						background: rgba(255, 240, 199, 1);
						border-radius: 4upx;
						font-size: 22upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(182, 137, 14, 1);
						padding-left: 10upx;
						margin-top: 8upx;

						image {
							width: 25upx;
							height: 22upx;
							margin-right: 6upx;
							display: inline-block;
							vertical-align: middle;
							margin-bottom: 4upx;
						}
					}

				}

				.session-2 {
					margin-bottom: 42upx;
					line-height: 26upx;

					span {
						font-size: 26upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						line-height: 26upx;
						margin-right: 22upx;
					}
				}

				.session-3 {
					font-size: 26upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					line-height: 26upx;
					margin-bottom: 10upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.session-4 {
					display: flex;
					margin-bottom: 30upx;
					line-height: 24upx;

					>view {
						margin-right: 30upx;

						span:nth-child(1) {
							color: #A3A3A3;
							font-size: 24upx;
							margin-right: 8upx;
							line-height: 24upx;
						}

						span:nth-child(2) {
							color: #A3A3A3;
							font-size: 24upx;
							line-height: 24upx;
						}
					}
				}

			}
		}

		.expert-bottom {
			line-height: 98upx;
			height: 98upx;
			border-top: 1upx solid #F5F5F5;
			padding-left: 150upx;

			.session-5 {
				display: flex;
				height: 98upx;
				line-height: 98upx;

				>view {

					span:nth-child(1) {
						color: #333333;
						font-size: 28upx;
						font-weight: bold;
						margin-right: 8upx;
					}

					span:nth-child(2) {
						color: #DE5A02;
						font-size: 28upx;
						font-weight: bold;

					}
				}

				.sess-1 {
					margin-right: 38upx;
					height: 98upx;
					line-height: 98upx;
				}

				.sess-2 {
					height: 98upx;
					line-height: 98upx;
				}

				.sess-3 {
					flex: 1;
					text-align: right;
					margin-top: 24upx;

					span {
						display: inline-block;
						color: #196DEC !important;
						width: 104upx;
						height: 50upx;
						line-height: 50upx;
						background: rgba(243, 247, 255, 1);
						border-radius: 4upx;
						text-align: center;
						font-size: 24upx !important;
						margin-right: 32upx !important;
					}
				}
			}
		}

	}

	.notice {
		display: flex;
		justify-content: space-between;
		padding: 7upx 32upx 14upx 32upx;
		margin-top: 210upx;
		background: linear-gradient(109deg, rgba(255, 249, 237, 1) 0%, rgba(255, 245, 237, 1) 100%);

		.notice-title {
			position: relative;
			width: 144upx;
			height: 54upx;
			background: linear-gradient(102deg, rgba(255, 152, 23, 1) 0%, rgba(252, 81, 38, 1) 100%);
			border-radius: 31upx;
			text-align: center;
			color: #FFFFFF;
			font-size: 26upx;
			line-height: 54upx;
			margin-top: 14upx;
		}

		.notice-wheel {
			flex: 1;

			.notice-swiper {
				height: 70upx;
				line-height: 70upx;

				.notice-text {
					font-size: 26upx;
					font-weight: 400;
					color: rgba(222, 90, 2, 1);
					line-height: 70upx;
				}
			}
		}
	}

	.recommend {
		height: 120upx;
		line-height: 120upx;
		text-align: center;

		view {
			font-size: 34upx;
			font-family: FZZCHJW--GB1-0, FZZCHJW--GB1;
			font-weight: normal;
			color: rgba(68, 68, 68, 1);
			line-height: 120upx;
			display: inline-block;
			font-weight: bold;
			position: relative;

			image {
				width: 32upx;
				height: 36upx;
				display: inline-block;
				vertical-align: middle;
				margin-bottom: 10upx;
				margin-right: 12upx;
			}

			&::before {
				content: '';
				display: block;
				width: 68upx;
				height: 2upx;
				background-color: #A3A3A3;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: -90upx;
			}

			&::after {
				content: '';
				display: block;
				width: 68upx;
				height: 2upx;
				background-color: #A3A3A3;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: -90upx;
			}
		}
	}

	.no-data {
		width: 100%;
		height: 340upx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0 4upx 22upx 0 rgba(0, 0, 0, 0.03);
		box-sizing: border-box;
		padding-top: 62upx;

		.no-data-image {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				// width: 172upx;
				height: 304upx;
			}
		}

		.no-data-text {
			text-align: center;
			font-size: 26upx;
			font-weight: 400;
			color: rgba(163, 163, 163, 1);
			margin-top: 16upx;
		}
	}

	.totop {
		width: 88upx;
		height: 88upx;
		box-shadow: 0px 4upx 8upx 0upx rgba(0, 0, 0, 0.04);
		border: 2upx solid rgba(235, 235, 235, 1);
		position: fixed;
		right: 20upx;
		bottom: 56upx;
		background-color: #FFFFFF;
		border-radius: 50%;
		line-height: 88upx;
		text-align: center;
	}

	.last-item {
		margin-right: 0upx;
	}

	// .search-cate-text {
	// 	font-size: 28upx;
	// 	font-family: PingFangSC-Regular, PingFang SC;
	// 	font-weight: 400;
	// 	color: rgba(121, 121, 121, 1);
	// 	padding-right: 30upx;
	// 	/* margin-right: 46upx; */
	// 	/* position: absolute;
	// 	top: 12upx;
	// 	right: 30upx;
	// 	z-index: 4 */
	// }

	.search-item {
		position: fixed;
		top: 0;
		height: 170upx;
		background-color: #FFFFFF;
		z-index: 999;
		width: 100%;

		.re-filter-contain {
			position: relative;
			height: 82upx;
			border-bottom: 1upx solid #F2F2F2;
			background-color: #ffffff;
			display: flex;
			align-items: center;
		}

		.re-filter-contain-left {
			flex: 1;
		}
	}

	.expert-list {
		background-color: #FFFFFF;
	}

	.search-input {
		display: flex;
		height: 78upx;
		margin-bottom: 18upx;
		box-sizing: border-box;
		padding: 0 32upx 0 32upx;
		background-color: #FFFFFF;

		.search-input-value {
			flex: 1;
			height: 78upx;
			background: #f5f5f5;
			border-radius: 6upx;
			position: relative;

			.search {
				width: 32upx;
				height: 34upx;
				position: absolute;
				left: 26rpx;
				top: 47%;
				transform: translateY(-50%);

				image {
					width: 32upx;
					height: 34upx;
				}
			}

			.delete {
				width: 28upx;
				height: 28upx;
				position: absolute;
				right: 20upx;
				top: 50%;
				transform: translateY(-50%);
			}

			input {
				height: 78upx;
				border-radius: 6upx;
				font-size: 28upx;
				padding-left: 72upx;
			}
		}

		.search-placehoder {
			font-size: 28upx;
			font-weight: 400;
			color: #A3A3A3;
		}

		.search-text {
			width: 88upx;
			height: 78upx;
			line-height: 78upx;
			text-align: right;
			font-size: 30upx;
			font-weight: 400;
			color: #333333;
		}
	}

	.accountHead {
		width: 46upx;
		border-radius: 50%;
		display: inline-block;
		vertical-align: middle;
		margin-right: 20upx;
		margin-bottom: 4upx;
	}

	.position {
		width: 18upx;
		height: 22upx;
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 4upx;
		margin-right: 10upx;
	}

	.peoject-warp {
		width: 100%;
		background-color: #F5F6F9;
	}

	.project-icon {
		width: 30upx;
		height: 30upx;
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 4upx;
		margin-right: 10upx;
	}

	.datajson {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 250px;
		padding: 0 10px;
		background-color: rgba(255, 255, 255, .8);
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		font-size: 12px;

		.text {
			margin-top: 10px;
		}

		.item {
			width: 15px;
		}
	}

	.place {
		height: 160upx;
		width: 100%;
		margin-top: 155upx;
		position: relative;
		box-sizing: border-box;
		padding-left: 58upx;
		position: relative;

		.uni-icons-close {
			position: absolute;
			right: 4upx;
			top: -15upx;
		}

		image {
			width: 100%;
			height: 160upx;
			position: absolute;
			top: 0;
			left: 0;
		}

		h3 {
			color: #11659C;
			font-size: 28upx;
			padding-top: 18upx;
			margin-bottom: 6upx;

			span {
				font-size: 34upx;
				color: #DE5A02;
				font-weight: bold;
			}
		}

		.project-button {
			width: 180upx;
			height: 46upx;
			background: linear-gradient(294deg, rgba(26, 106, 158, 1) 0%, rgba(6, 117, 190, 1) 100%);
			box-shadow: 0upx 4upx 8upx 0upx rgba(23, 107, 162, 0.21);
			border-radius: 23upx;
			font-size: 24upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			line-height: 46upx;
			text-align: center;
		}


	}

	.m40 {
		margin-top: 183upx;
	}

	.product-list {
		.product {
			padding: 36upx 32upx 30upx 32upx;
			background-color: #fff;
			margin-bottom: 14upx;

			.project-1 {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30upx;

				.project-1-left {
					width: 190upx;
					height: 136upx;
					border-radius: 4upx;
					margin-right: 24upx;

					image {
						width: 190upx;
						height: 136upx;
						border-radius: 4upx;
					}
				}

				.project-1-right {
					flex: 1;

					>view:nth-child(1) {
						font-size: 30upx;
						font-weight: 700;
						color: #444444;
						line-height: 38upx;
						margin-bottom: 6upx;
					}

					>view:nth-child(2) {
						display: flex;
						flex-wrap: wrap;
						margin-bottom: 12upx;
						height: 38upx;
						overflow: hidden;

						.project-span {
							font-size: 22upx;
							font-weight: 400;
							color: rgba(51, 51, 51, 1);
							margin-right: 30upx;
							position: relative;

							&::after {
								content: '';
								display: block;
								width: 2upx;
								height: 20upx;
								background: rgba(117, 117, 117, 1);
								position: absolute;
								right: -15upx;
								top: 50%;
								transform: translateY(-50%);
							}
						}

					}

					>view:nth-child(3) {
						font-size: 24upx;
						font-weight: 500;
						color: rgba(250, 100, 0, 1);
					}
				}
			}

			.project-2 {
				background: rgba(249, 249, 249, 1);
				border-radius: 4upx;
				padding: 14upx 24upx;

				view {
					color: #A3A3A3;
					font-size: 24upx;
					font-weight: 400;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 38upx;
				}


			}

			.project-3 {
				display: flex;
				justify-content: space-between;
				margin-top: 24upx;

				>view:nth-child(1) {
					font-size: 24upx;
					font-weight: 400;
					color: rgba(117, 117, 117, 1);
					width: 530upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				>view:nth-child(2) {
					flex: 1;
					font-size: 24upx;
					font-weight: 400;
					color: rgba(117, 117, 117, 1);
					text-align: right;
				}
			}
		}

	}

	.goods-list {
		background-color: #F5F5F5;

		.loading-text {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 30px;
			color: #979797;
			font-size: 12px;
		}

	}

	.bottom-text {
		text-align: center;
		font-size: 26upx;
		font-weight: 400;
		color: rgba(163, 163, 163, 1);
		margin: 16upx;
	}

	.recomm-contain-top {
		display: flex;
		align-items: center;
		padding: 0 30upx;
	}

	.recomm-contain-top-line {
		height: 1upx;
		width: 239upx;
		border: 1upx solid #EBEBEB;
	}

	.recomm-contain-top-text-search {
		margin: 0 43upx;
		font-size: 32upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(51, 51, 51, 1);
	}
</style>
